<template>
    <div class="script-container flex  flex-column">
        <div class="script-title flex align-center">
            <div :class="['tab', { 'active': tabIndex === index }]" v-for="(item, index) in tabs" :key="index"
                @click="changeTab(index)">{{
                    item.name }}
            </div>
        </div>
        <div class="script-content flex flex1">
            <div class="left">
                <div class="left-title flex align-center justify-between">
                    <h3>直播商品</h3>
                    <div class="btn">智能切品</div>
                    <div class="btn">新增</div>
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </div>
                <div class="left-list">
                    <div :class="['list-item flex', { 'active': index === listItemIndex }]"
                        v-for="(item, index) in leftGoods" :key="index" @click="changeListItem(index)">
                        <div class="item-img">
                            <img :src="item.img" width="80px" height="80px" alt="">
                        </div>
                        <div class="item-desc flex flex-column justify-between">
                            <div class="name flex1">{{ item.name }}</div>
                            <div class="action flex justify-between">
                                <div class="btn">删除</div>
                                <div class="btn">编辑</div>
                                <div class="btn">下移</div>
                                <div class="btn">上移</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right flex1">
                <el-tabs v-model="editableTabsValue" type="card" editable class="tabs-box" @edit="handleTabsEdit">
                    <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                        <div class="action-box flex align-center justify-between">
                            <div class="action-left flex align-center">
                                <h3>话术内容</h3>
                                <div class="btn">AI帮写</div>
                                <div class="btn">AI拓写</div>
                            </div>
                            <div class="action-right flex align-center">
                                <div class="btn">随机词</div>
                                <div class="btn">促单话术</div>
                                <div class="btn">插播素材</div>
                                <div class="btn">违禁词</div>
                                <div class="btn">试听</div>
                            </div>
                        </div>
                        <div :contenteditable="true" class="text-box default-scroll">
                            {{ store.state.defaultScriptText }}
                        </div>
                        <el-row class="btn-row" justify="end" align="middle">
                            <el-button size="small">删除话术</el-button>
                            <el-button type="primary" size="small">保存数据</el-button>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup>
import {  ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useAppStore } from "@/store/index"
import { Refresh } from "@element-plus/icons-vue"
import imgSrc from '@/assets/image.png'

const store = useAppStore()

const tabs = ref([
    {
        name: '平播策略'
    },
    {
        name: '逼单策略'
    },
    {
        name: '拉停留策略'
    },

])

const tabIndex = ref(0)
const listItemIndex = ref(0)

const leftGoods = ref([
    {
        name: '商品名称1',
        img: imgSrc,
    },
    {
        name: '商品名称2',
        img: imgSrc,
    }
])

const editableTabsValue = ref('1')
const editableTabs = ref([
  {
    title: '话术1',
    name: '1',
    content: '话术1',
  },
  {
    title: '话术2',
    name: '2',
    content: '话术2',
  },
])

const changeTab = (i) => {
    tabIndex.value = i
}

const changeListItem = (i) => {
    listItemIndex.value = i
}

const handleTabsEdit = (targetName, action) => {
    if (action === 'add') {
    const newTabName = `话术${editableTabs.value.length + 1}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {

    const tabs = editableTabs.value
    if(tabs.length === 1){
        ElMessage.error('请至少保留一个话术')
        return
    }
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}
</script>

<style lang="less" scoped>
.script-container {
    height: 100%;
    color: @color-white;

    .script-title {
        width: 100%;
        height: 50px;
        background-color: @bg-default;
        box-sizing: border-box;
        padding-left: 20px;
        margin-bottom: 20px;

        .tab {
            margin-right: 40px;
            color: @font-color-default;
            cursor: pointer;

            &.active {
                color: @color-white;
            }
        }
    }

    .script-content {
        .left {
            width: 300px;
            height: 100%;
            margin-right: 20px;
            padding: 10px;
            box-sizing: border-box;
            overflow-x: hidden;
            overflow-y: auto;
            background-color: @bg-default;

            .left-title {
                margin-bottom: 20px;
                color: @color-white;

                h3 {
                    margin: 0;
                    padding: 0;
                }

                .btn {
                    font-size: 12px;
                    color: @btn-color;
                    cursor: pointer;
                }
            }

            .left-list {
                .list-item {
                    width: 100%;
                    margin-bottom: 10px;
                    padding: 5px;
                    box-sizing: border-box;
                    overflow: hidden;
                    border: 1px solid transparent;

                    .item-img {
                        margin-right: 10px;
                    }

                    .item-desc {
                        width: 100%;
                        padding-bottom: 10px;

                        .name {
                            white-space: wrap;
                            word-break: break-all;
                        }

                        .btn {
                            font-size: 12px;
                            color: @color-white;
                            cursor: pointer;
                        }
                    }

                    &.active {
                        border: 1px solid @color-white
                    }
                }
            }
        }

        .right {
            color: @color-white;
            padding:20px;
            background-color: @bg-default;

            .action-box{
                padding:10px 20px;

                h3{
                    margin:0 20px  0 0;
                    padding:0;

                }

                .btn{
                    font-size: 12px;
                    color: @btn-color;
                    cursor: pointer;
                    margin-right:20px;
                }
            }

            .tabs-box{
                height: 100%;

                :deep(.el-tabs__content){
                    background-color: #000;
                }

                :deep(.el-tabs__header){
                    margin: 0;
                }

                // :deep(.el-tabs__nav){
                //     border-color: transparent;
                // }
            }

            .text-box{
                color: #000;
                height: 455px;
                overflow-y: auto;
                padding:20px;
                margin-bottom: 10px;
                background-color: @color-white;
            }

            .btn-row{
                padding-right: 20px;
            }

          

            :deep(.el-tabs__item){
                color: @color-white;

                &.is-active{
                    background-color: #000;
                }
            }

            :deep(.el-tabs__new-tab){
                color: #fff;
            }
        }
    }
}
</style>